<template>
  <div style="padding: 20px">
    <el-descriptions
        class="margin-top"
        title="个人信息"
        :column="3"
        border
    >
      <template #extra>
        <el-button type="primary" @click="handleChange1"><el-icon><EditPen /></el-icon>编辑</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">账号ID</div>
        </template>
        {{ message.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">手机号</div>
        </template>
        {{ message.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">性别</div>
        </template>
        {{ message.gender === '0' ? '女' : '男' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">网站昵称</div>
        </template>
        {{ message.hrNick }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">出生日期</div>
        </template>
        {{ birthOnShow }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">身份</div>
        </template>
        {{ message.status }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">姓名</div>
        </template>
        {{ message.name }}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template #label>
          <div class="cell-item">邮箱</div>
        </template>
        {{ message.email.substring(0,1) + "******" + message.email.substring(message.email.length - 1,message.email.length) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">通讯地址</div>
        </template>
        {{ message.address }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider style="margin: 20px 0" />
    <el-descriptions
        class="margin-top"
        title="企业信息"
        :column="4"
        border
    >
      <template #extra>
        <el-button type="primary" @click="handleChange2"><el-icon><EditPen /></el-icon>编辑</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">企业昵称</div>
        </template>
        {{ message.companyName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">法定代表人</div>
        </template>
        {{ message.companyBoss }}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template #label>
          <div class="cell-item">企业类型</div>
        </template>
        {{ message.companyType === '1' ? '国有独资企业' :
           message.companyType === '2' ? '有限责任公司' :
           message.companyType === '3' ? '股份有限公司' :
           message.companyType === '4' ? '中外合资' :
           message.companyType === '5' ? '外商独资' :
           message.companyType === '6' ? '个人独资企业' :
           message.companyType === '7' ? '合伙企业' : '中外合作经营企业' }}
      </el-descriptions-item>
      <el-descriptions-item span="5">
        <template #label>
          <div class="cell-item">企业简介</div>
        </template>
        {{ message.companyIntroduce }}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template #label>
          <div class="cell-item">企业地址</div>
        </template>
        {{ message.companyAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">公司图片</div>
        </template>
        <el-image style="width: 100px; height: 100px" :src="message.companyImage"/>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <!-- 个人信息表单 -->
  <el-dialog
      v-model="dialogFormVisible1"
      title="个人信息修改"
      width="500"
  >
    <el-form :model="form" label-width="auto">
      <el-form-item>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:60000/company/api/v1/upload"
            :show-file-list="false"
            :on-success="response => handleAvatarSuccess(response,'head')"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            style="display: block;margin: 0 auto"
        >
          <img v-if="form.headImage" :src="form.headImage" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.hrNick" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio value="0">女</el-radio>
          <el-radio value="1">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="请选择一个日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DDTHH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="身份">
        <el-input v-model="form.status" />
      </el-form-item>
      <el-form-item label="通讯地址">
        <el-input v-model="form.address" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button style="display:block;margin:0 auto" type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 企业信息表单 -->
  <el-dialog
      v-model="dialogFormVisible2"
      title="企业信息修改"
      width="500"
  >
    <el-form :model="form" label-width="auto">
      <el-form-item label="企业名称">
        <el-input v-model="form.companyName" />
      </el-form-item>
      <el-form-item label="企业类型">
        <el-select v-model="form.companyType" placeholder="请选择公司类型">
          <el-option label="国有独资企业" value="1" />
          <el-option label="有限责任公司" value="2" />
          <el-option label="股份有限公司" value="3" />
          <el-option label="中外合资" value="4" />
          <el-option label="外商独资" value="5" />
          <el-option label="个人独资企业" value="6" />
          <el-option label="合伙企业" value="7" />
          <el-option label="中外合作经营企业" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item label="法定代表人">
        <el-input v-model="form.companyBoss" />
      </el-form-item>
      <el-form-item label="企业简介">
        <el-input v-model="form.companyIntroduce" type="textarea" />
      </el-form-item>
      <el-form-item label="企业地址">
        <el-input v-model="form.companyAddress" type="textarea" />
      </el-form-item>
      <el-form-item label="企业图片">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:60000/company/api/v1/upload"
            :show-file-list="false"
            :on-success="response => handleAvatarSuccess(response,'company')"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.companyImage" :src="form.companyImage" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button style="display:block;margin:0 auto" type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {recruiterApi} from "../../api/app.js";
import {Action, ElMessage, ElMessageBox, UploadProps} from "element-plus";
import axios from "axios";

// 格式化时间
const formatTime = (row) => {
  const date = new Date(row);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
let message = ref({
  id: 0,
  hrNick: "",
  password: "",
  name: "",
  gender: "",
  birth: "",
  lastOnline: "",
  phone: "",
  email: "",
  status: "",
  address: "",
  headImage: "",
  companyName: "",
  companyType: "",
  companyBoss: "",
  companyIntroduce: "",
  companyAddress: "",
  companyImage: ""
});
const birthOnShow = ref();
onMounted(() => {
  message.value = JSON.parse(localStorage.getItem('recruiter'));
  birthOnShow.value = formatTime(message.value.birth);
})

const form = ref();
const dialogFormVisible1 = ref(false);
// 个人信息修改
const handleChange1 = () => {
  dialogFormVisible1.value = true;
  form.value = message.value;
}
// 头像上传
// 上传成功
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, type) => {
  console.log(response);
  console.log(type);
  if(type === 'company') form.value.companyImage = response;
  else if(type === 'head') form.value.headImage = response;
}
// 上传失败
const handleAvatarError = (err, file, fileList) => {
  // 提示成功
  ElMessage({
    message: '修改失败！',
    type: 'error',
  });
}
// 上传图片前的格式校验
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const dialogFormVisible2 = ref(false);
// 企业信息修改
const handleChange2 = () => {
  dialogFormVisible2.value = true;
  form.value = message.value;
}
const reg_email = /.*@.*/;
// 确定修改
const onSubmit = () => {
  // 邮箱格式错误
  if(!reg_email.test(form.value.email)) {
    ElMessageBox.alert('邮箱格式错误！', '操作失败', {
      confirmButtonText: '确认',
      callback: (action: Action) => {
        ElMessage({
          type: 'error',
          message: `操作失败`,
        })
      }
    });
  } else {
    recruiterApi.changeRecruiterById({
      id: form.value.id,
      hrNick: form.value.hrNick,
      password: form.value.password,
      name: form.value.name,
      gender: form.value.gender,
      birth: form.value.birth,
      phone: form.value.phone,
      email: form.value.email,
      status: form.value.status,
      address: form.value.address,
      headImage: form.value.headImage,
      companyName: form.value.companyName,
      companyType: form.value.companyType,
      companyBoss: form.value.companyBoss,
      companyIntroduce: form.value.companyIntroduce,
      companyAddress: form.value.companyAddress,
      companyImage: form.value.companyImage
    }).then(response => {
      console.log(response);
      // 更新信息
      message.value = response.data;
      birthOnShow.value = formatTime(response.data.birth);
      localStorage.setItem('recruiter',JSON.stringify(response.data));
      // 关闭界面
      if(dialogFormVisible2.value) dialogFormVisible2.value = false;
      if(dialogFormVisible1.value) dialogFormVisible1.value = false;
      // 提示成功
      ElMessage({
        message: '修改成功！',
        type: 'success',
      });
      // 更新其他页面
      window.dispatchEvent(new CustomEvent('changeHrNick',{ detail: message.value.hrNick }));
      window.dispatchEvent(new CustomEvent('changeHeadImage',{ detail:message.value.headImage }));
    }).catch(error => {
      console.log(error);
      // 提示失败
      ElMessage({
        message: '修改失败！',
        type: 'error',
      });
    })
  }
}
</script>

<style scoped>
.el-divider {
  margin: 0;
}
.el-button {
  width: 80px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
